/* components */
import { QualificationBaseDialog } from '@src/modules/setting/messageChannel/components/qualification/dialog'
/* hooks */
import { useDialog } from '@hooks/useDialog'
/* vue */
import { defineComponent, PropType } from 'vue'
/* model */
import { 
  SMSQualificationDialogButtonEnum, 
  SMSQualificationDialogStatusEnum, 
  SMSQualificationStatusEnum 
} from '@src/modules/setting/messageChannel/components/qualification/model/enum'
import { isFalsy } from 'pub-bbx-utils'

enum QualificationBaseDialogEventEnum {
  View = 'view',
  Edit = 'edit',
  Create = 'create'
}

export default defineComponent({
  name: 'QualificationStatusDialog',
  props: {
    status: {
      type: Number as PropType<SMSQualificationStatusEnum | null>,
      default: SMSQualificationStatusEnum.EMPTY
    },
    errorMsg: {
      type: String,
      default: ''
    },
    onEdit: {
      type: Function
    },
    onView: {
      type: Function
    },
    onCreate: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
    const { visible: insideVisible, showDialog, hideDialog } = useDialog()
    
    return {
      visible: insideVisible,
      showDialog,
      hideDialog,
    }
    
  },
  computed: {
    title(): string {
      return '资质认证'
    },
    confirmButtonText(): string {
      return SMSQualificationDialogButtonEnum[this.status as keyof typeof SMSQualificationDialogButtonEnum]
    },
    contentText(): string {
      return SMSQualificationDialogStatusEnum[this.status as keyof typeof SMSQualificationDialogStatusEnum]
    },
    editButtonText(): string {
      return SMSQualificationDialogButtonEnum[SMSQualificationStatusEnum.REJECTED]
    }
  },
  methods: {
    openDialog() {
      this.showDialog()
    },
    onClose() {
      this.hideDialog()
    },
    onConfirm() {
      this.emitEventHandler()
      this.hideDialog()
    },
    emitEventHandler() {
      switch (this.status) {
        case SMSQualificationStatusEnum.EMPTY:
          this.$emit(QualificationBaseDialogEventEnum.Create)
          break
        case SMSQualificationStatusEnum.APPROVED:
        case SMSQualificationStatusEnum.PENDING:
          this.$emit(QualificationBaseDialogEventEnum.View)
          break
        case SMSQualificationStatusEnum.REJECTED:
          this.$emit(QualificationBaseDialogEventEnum.Edit)
          break
        default:
          throw new Error('未知的状态')
      }
    },
    onEditHandler() {
      this.$emit(QualificationBaseDialogEventEnum.Edit)
    },
    renderButton() {
      
      const isApproved = this.status === SMSQualificationStatusEnum.APPROVED
      if (isFalsy(isApproved)) {
        return
      }
      return (
        <el-button type="primary" onClick={this.onEditHandler}>
          { this.editButtonText }
        </el-button>
      )
      
    },
    renderErrorMsg() {
      if (isFalsy(this.errorMsg)) {
        return
      }
      return (
        <div class="qualification-status-dialog-error">
          { this.errorMsg }
        </div>
      )
    }
  },
  render() {
    return (
      <QualificationBaseDialog
        visible={this.visible}
        title={this.title}
        onClose={this.onClose}
        onConfirm={this.onConfirm}
        confirmText={this.confirmButtonText}
      >
        <div class="qualification-status-dialog">
          { this.contentText }
          { this.renderErrorMsg() }
        </div>
        <div slot="button">
          { this.renderButton() }
        </div>
      </QualificationBaseDialog>
    )
  }
})